<template>
	<view class="">
		<view v-if="dataList.length !== 0">
			<view v-for="(item,index) in dataList" :key='index'>
				<view class="year">{{item.year}}年</view>
				<view class="detail" v-for="ele in item.res" :key='ele.id'>
					<view class="list">
						<view class="name">{{ele.project == null ? "" : ele.project.name}}</view>
						<view class="money">{{ele.money}}元</view>
					</view>
					<view class="list">
						<view :class="[ele.status=='examine'? 'status-green':ele.status=='agree'?'status-blue':'status-red']">
							{{ele.status | statuFilter}}
						</view>
						<view class="time">{{ele.createtime_text}}</view>
						<!-- moment(ele.createtime_text).format('MM-DD HH:mm') -->
					</view>
					<u-line class="info"></u-line>
				</view>
			</view>
		</view>
		<view v-else>
			<u-divider style="margin-top: 200rpx;">暂无数据</u-divider>
		</view>
	</view>
</template>

<script>
	import moment from "moment"
	export default {
		filters:{
			statuFilter(value){
				const statuName = {
					examine:'未发放',
					agree:'已发放',
					refuse:'已拒绝',
				}
				return statuName[value]
			}
		},
		data() {
			return {
				isAdd: true,
				dataList: [],
				quaryList: {
					page: 1,
					page_size: 10
				},
				oldData: [],
			}
		},
		onLoad() {
			this.getRecord()
		},
		// 下拉刷新
		async onPullDownRefresh() {
			this.quaryList.page = 1
			this.oldData = []
			this.dataList = []
			await this.getRecord()
			uni.stopPullDownRefresh()
		},
		// 触底
		onReachBottom() {
			this.quaryList.page++
			this.getRecord()
		},
		methods: {
			getRecord() {
				this.$u.api.moneyRecord(this.quaryList).then(res => {
					if (res.code == 1) {
						this.oldData = [...this.oldData, ...res.data]
						this.dataList = this.mapLoction(this.oldData)
					}
					console.log(this.dataList)
				})
			},
			// 数组变换=>年中包含信息
			mapLoction(arr) {
				var newArr = [];
				arr.forEach(function(oldData, i) {
					var index = -1;
					var createTime = moment(oldData.createtime_text).year();
					var alreadyExists = newArr.some(function(newData, j) {
						if (moment(oldData.createtime_text).year() === moment(newArr.createtime_text)
							.year()) {
							index = j;
							return true;
						}
					});
					if (!alreadyExists) {
						newArr.push({
							year: moment(oldData.createtime_text).year(),
							res: [{
								...oldData
							}]
						});
					} else {
						newArr[index].res.push({
							...oldData
						});
					}
				});
				return newArr;
			}

		}
	}
</script>

<style scoped lang="scss">
	.year {
		margin: 20rpx 0;
		margin-left: 60rpx;
		font-weight: 700rpx;
		font-size: 48rpx;
	}

	.list {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 60rpx;

		.name {
			width: 75%;
			font-size: 35rpx;
			color: rgba($color: #000000, $alpha: 0.8);
		}

		.money {
			font-size: 34rpx;
			color: rgba($color: #000000, $alpha: 0.6);
		}

		.status-blue {
			font-size: 28rpx;
			color: #1890ff;
		}

		.status-green {
			font-size: 28rpx;
			color: #23c011;
		}

		.status-red {
			font-size: 28rpx;
			color: #dc0122;
		}

		.time {
			font-size: 26rpx;
			color: rgba($color: #000000, $alpha: 0.5);
			margin-bottom: 10rpx;
		}


	}
</style>
